<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org/">
<div th:fragment="hoverTable()">
    <style rel="stylesheet">
        body {
            background-image: url("/images/background/dirt_dark.png");
            background-position: left top;
            background-size: auto;
            background-repeat: repeat;
            background-attachment: scroll;
        }

        table td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        table th {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #dataTable table {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            border-top: 2px solid black;
            table-layout: fixed;
        }

        .tableHead {
            position: absolute;
            width: 80%;
            top: 5%;
            left: 10%;
        }

        .tableHead h2 {
            color: #000000;
            font-weight: bold;
            font-family: Unifont, serif;
            font-size: 300%
        }

        .tableHead .input-group {
            padding-top: 2%;
            /*font-family: Unifont, serif;*/
        }

        .optTd a {
            cursor: pointer;
        }

        .pageControl img {
            cursor: pointer;
        }

        .pageControl .nextPageBtn:hover {
            content: url("/images/indexButton/nextPage_hover.png");
        }

        .pageControl .prePageBtn:hover {
            content: url("/images/indexButton/prePage_hover.png");
        }
    </style>
    <div class="tableHead row">
        <h2 class="sub-header col-md-4" th:text="${tableTitle}"></h2>
        <div class="input-group col-md-6 input-group-lg pull-right"><!--保持内联，消除边框，类似于form-inline-->
            <div class="input-group-btn"><!--不换行，与相邻元素内联，包含dropdown-->
                <button id="selectBtn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span id="selectBtnSpan" th:text="${queryText==null?'请选择':queryText}">请选择</span>
                    &nbsp;<span class="caret"></span>
                </button>
                <input type="hidden" id="selectKey" th:value="${queryKey}">
                <ul class="dropdown-menu">
                    <li>
                        <a class="selectA" href="javascript:void(0);"
                           onclick="$('#selectBtnSpan').text('请选择');$('#selectKey').val('')">
                            请选择
                        </a>
                    </li>
                    <li th:each="select,index:${selects}">
                        <a class="selectA" href="javascript:void(0);" th:text="${select.value}"
                           th:onclick="$('#selectBtnSpan').text([[${select.value}]]);$('#selectKey').val([[${select.key}]])">
                        </a>
                    </li>
                </ul>
            </div>
            <input th:value="${queryValue}" class="form-control" id="selectValue" type="text" placeholder="请输入关键词"/>
            <span class="input-group-btn"><!--不换行，与相邻元素内联-->
		      <button class="btn btn-primary" onclick="$('#pageNo').val(1);tableInit(findListHtml)">搜索</button>
		      <button class="btn btn-warning" onclick="tableInit(findListHtml,true)">重置</button>
		      <button th:if="${hasAdd}" class="btn btn-success" onclick="tableAdd()">添加</button>
		</span>
        </div>
    </div>
    <table class="table table-hover">
        <thead>
        <tr>
            <th th:class="col-md-+${optionWidth}">操作</th>
            <th th:class="col-md-+${head.width}" th:each="head,stat:${heads}"
                th:text="${head.headName}">
            </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="data,index:${datas}">
            <td class="optTd">
                <a th:each="option,index:${options}">
                    <a th:text="${option.key}" th:onclick="doOptions([[${option.value}]],[[${data[0]}]])"></a>
                    <span th:if="${index.index<options.size()-1}"> | </span>
                </a>
            </td>
            <td th:each="oneRow,inIndex:${data}" th:text="${oneRow}"></td>
        </tr>
        </tbody>
    </table>
    <input type="hidden" id="pageNo" th:value="${pageNo}"/>
    <input type="hidden" id="pageSize" th:value="${pageSize}"/>
    <div class="pageControl" style="width: 100%;position:absolute;top: 90%;left: 12%">
        <div class="col-md-4">
            <img th:if="${!isFirst}" class="prePageBtn" src="/images/indexButton/prePage.png"
                 th:onclick="$('#pageNo').val([[${pageNo-1}]]);tableInit(findListHtml)" alt="上一页">
        </div>
        <h3 class="col-md-2" style="font-family: Unifont,serif" th:text="'['+${pageNo}+' / '+${pageCounts}+']'"></h3>
        <div class="col-md-5 pull-right">
            <img th:if="${!isLast}" class="nextPageBtn" src="/images/indexButton/nextPage.png"
                 th:onclick="$('#pageNo').val([[${pageNo+1}]]);tableInit(findListHtml)" alt="下一页">
        </div>
    </div>
</div>
<div th:fragment="hoverTableFoot()">
    <script type="text/javascript">
        //初始化表格
        function tableInit(findListHtml, isReload) {
            const paramJson = {};
            let pageNo;
            let pageSize;
            if (!isReload) {
                const dataKey = $("#selectKey").val();
                const dataValue = $("#selectValue").val();
                if (dataValue != null || dataKey !== "" || typeof dataKey != "undefined") {
                    paramJson[dataKey] = dataValue;
                    paramJson['queryKey'] = dataKey;
                    paramJson['queryValue'] = dataValue;
                }
                pageNo = $("#pageNo").val();
                pageSize = $("#pageSize").val();
            }
            paramJson['pageNo'] = pageNo == null ? 1 : pageNo;
            paramJson['pageSize'] = pageSize == null ? 32 : pageSize;

            $.ajax({
                url: findListHtml,
                type: 'POST',
                datatype: "JSON",
                data: paramJson,
                success: function (data) {
                    $("#dataTable").html(data);
                },
                beforeSend: function () {
                    showModal(true);
                },
                complete: function () {
                    showModal();
                },
            });
        }
    </script>
</div>
</html>